<template>
  <div class="research-box">
    <div>
      <t-button @click="addRes">
        <i class="doorIcon addDoorIcon">&#xe662;</i>
        <span>添加学术研究</span>
      </t-button>
    </div>
    <div class="center-box">
      <t-table
        :fixedRows="[0, 0]"
        :loading="loading"
        maxHeight="750px"
        row-key="index"
        :data="list"
        :columns="BUY_COLUMNS"
        :resizable="false"
        :headerAffixedTop="true"
      >
        <template #name="{ row }">
          <t-popup :content="row.name">
            <p class="reseach-title">{{ row.name }}</p>
          </t-popup>
        </template>
        <template #id="{ row }">
          <div class="edit-box">
            <span class="hw-click-cursor" @click="delModule(row.id)" style="margin-right: 8px">删除</span>
            <span class="hw-click-cursor" @click="edit(row.id)">编辑</span>
          </div>
        </template>
        <template #typeId="{ row }">
          <t-select
            v-if="row.typeId !== 0"
            :disabled="true"
            :borderless="true"
            v-model="row.typeId"
            placeholder="未添加类型"
          >
            <t-option v-for="item in selectList" :key="item.id" :label="item.text" :value="item.id" />
          </t-select>
          <div class="title-op" v-else>未设置</div>
          <!-- <div class="edit-box">
          <span @click="deleteResearch(row.id)" style="margin-right: 8px">删除</span>
          <span @click="edit(row.id)">编辑</span>
        </div> -->
        </template>

        <template #empty>
          <div class="hw-flex-style-c-c-c hw-box-style-flex-clm null-box-style">
            <img
              class="null-img-1"
              src="https://static-1316349889.cos.ap-shanghai.myqcloud.com/assets/img/exhibitNull.png"
              alt=""
            />
            <span class="null-title-1">暂无资料</span>
          </div>
        </template>
      </t-table>
    </div>
    <messageModel
      submitText="删除"
      title="提示"
      :visible="visibleMessage"
      problem="确定删除此文章？"
      message="删除后无法找回"
      @closeClick="closeClick"
      @submitClick="submitClick"
    />
    <t-row v-if="total > parmas.pageSize" style="margin-top: 16px">
      <t-col :span="12" style="margin-bottom: 0">
        <t-pagination
          v-model="parmas.pageNo"
          v-model:pageSize="parmas.pageSize"
          :total="total"
          show-sizer
          :page-size-options="pageSizeOptions"
          :show-page-size="true"
          @page-size-change="onPageSizeChange"
          @current-change="onCurrentChange"
        />
      </t-col>
    </t-row>
    <researchModel
      ref="researchRef"
      :selectList="selectList"
      :visible="visible"
      @close="close"
      @submit="submit"
      v-if="visible"
    />
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck

import { treeList } from '@/api/user/user';
import {
  investigationSave,
  investigationDetail,
  investigationDelete,
  investigationList,
} from '@/api/investigation/investigation';
import { MessagePlugin } from 'tdesign-vue-next';
import researchModel from './researchModel.vue';
import { ref, reactive, nextTick } from 'vue';
import { BUY_COLUMNS, dataList } from './data';
import messageModel from '@/components/messageModel/index.vue';
const visibleMessage = ref(false);
const delId = ref(null);
const delModule = async (e: number) => {
  delId.value = e;
  visibleMessage.value = true;
};
const pageSizeOptions = [
  { label: '每页 10 条', value: 10 },
  { label: '每页 20 条', value: 20 },
  { label: '每页 50 条', value: 50 },
  { label: '每页 100 条', value: 100 },
];
const closeClick = () => {
  //取消删除

  visibleMessage.value = false;
};
const parmas = reactive({
  value: '',
  pageNo: 1,
  pageSize: 20,
});

const list = ref([]);
const researchRef = ref(null);
const selectList = ref([]);
const total = ref(0);
const loading = ref(false);
const formData = reactive({
  id: 0,
  name: '',
  typeId: 0,
  author: '',
  publisher: '',
  PublishedOn: '',
  url: '',
  content: '',
  data: [],
});
const visible = ref(false);

const getSelectList = async () => {
  let res = await treeList(395711118516293); //级别
  selectList.value = res.data;
};
const addRes = () => {
  visible.value = true;
  // nextTick(() => {
  //   researchRef.value.setdatas({
  //     id: 0,
  //     name: '学术',
  //     typeId: 0,

  //     author: '学术',
  //     publisher: '学术',
  //     url: '',
  //     content: '学术',
  //     data: [],
  //     pdfData: [],
  //   });
  // });
};
const init = async () => {
  try {
    if (loading.value) {
      return;
    }
    loading.value = true;
    let res = await investigationList(localStorage.getItem('projectId'), parmas);
    total.value = res.data.total;
    console.log(total.value);
    list.value = res.data.data;
    loading.value = false;
  } catch {
    loading.value = false;
  }
};
const saveGoods = async (e) => {
  try {
    if (loading.value) {
      return;
    }
    loading.value = true;
    const typeId = e.typeId ? e.typeId : 0;
    let arr = { ...e, typeId };
    // e.typeId = e.typeId ? e.typeId : '';
    let res = await investigationSave(localStorage.getItem('projectId'), arr);
    if (res.statusCode == 200) {
      MessagePlugin.success('操作成功');
      visible.value = false;
    } else {
      // MessagePlugin.erroe('操作成功');
    }
    loading.value = false;
    init();
  } catch {
    loading.value = false;
  }
};
const submitClick = async () => {
  try {
    if (loading.value) {
      return;
    }
    loading.value = true;
    let res = await investigationDelete(localStorage.getItem('projectId'), delId.value);
    if (res.statusCode == 200) {
      visibleMessage.value = false;
      MessagePlugin.success('删除成功');
    }
    loading.value = false;
    init();
  } catch {
    loading.value = false;
  }
};
const close = () => {
  visible.value = false;
};
const edit = async (e: number) => {
  try {
    if (loading.value) {
      return;
    }
    loading.value = true;
    let res = await investigationDetail(e);
    if (res.statusCode !== 200) {
      return;
    }
    visible.value = true;
    nextTick(() => {
      if (typeof res.data?.typeId === 'number') {
        const { typeId } = res?.data || {};
        res.data.typeId = typeId ? typeId : '';
      }
      researchRef.value.setdatas(res.data);
    });

    // total.value = res.data.total;
    // list.value = res.data.data;
    loading.value = false;
    console.log(visible.value);
  } catch (err) {
    console.log(err);
    loading.value = false;
  }
};
const submit = (e) => {
  // if(e)
  saveGoods(e);

  // visible.value = false;
};
const onPageSizeChange = (size) => {
  init();
};
const onCurrentChange = (index, pageInfo) => {
  //分页事件
  init();
};
init();
getSelectList();
</script>

<style lang="less" scoped>
.research-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 24px;
  // overflow: auto;
}
.center-box {
  height: calc(100% - 110px);
  // overflow: auto;
  margin-top: 16px;
  :deep(.t-table) {
    max-height: 100% !important;
    height: 100%;
  }
  :deep(.t-table__content) {
    max-height: 100% !important;
  }
  :deep(.t-table__body) {
    max-height: 100% !important;
  }
}
.research-box::-webkit-scrollbar {
  display: none;
}
.t-row {
  margin-top: 0px;
}
.t-row {
  margin-bottom: 0;
}
.title {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.4);
  line-height: 32px;
  margin-left: 16px;
}
.edit-box {
  display: flex;
  span {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #e62b17;
    line-height: 24px;
  }
}
:deep(.t-table) {
  border: none;
  border-bottom: none;
}

:deep(.t-table__header tr) {
  background: #f5f5f5;

  height: 48px;
}
:deep(.t-input.t-is-disabled) {
  background: #fff;
}
:deep(.t-input.t-is-disabled .t-input__inner) {
  color: rgba(0, 0, 0, 0.9);
}
:deep(.t-select.t-select-input--borderless .t-select__right-icon) {
  display: none;
}
:deep(.t-cascader .t-fake-arrow) {
  display: none;
}
:deep(.t-select-input--borderless .t-input) {
  border: none;
}
:deep(.t-table__empty) {
  border-bottom: none;
}
.addDoorIcon {
  font-size: 16px;
  color: #fff;
  margin-right: 6px;
}
.reseach-title {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
  line-height: 24px;
}
:deep(.t-select-input--borderless .t-input:hover:not(.t-input--focused)) {
  background: transparent;
}
.title-op {
  opacity: 0.6;
}
</style>
